<template>
  <div class="wu-card bg-white p-3">
    <div class="wu-card__header ai-center d-flex pb-3" :class="{'border-bottom': headBorderBottom}">
      <i class="iconfont fs-lg" :class="[leftIcon]"></i>
      <div class="flex-1 fs-xl mx-2">
          <strong>{{title}}</strong>
      </div>
      <div v-if="showRightIcon">
        <slot name="right">
        <i v-if="rightIcon" class="iconfont fs-xl" :class="[rightIcon]"></i>
      </slot>
      </div>
    </div>
    <div class="wu-card__body">
      <slot />
    </div>
  </div>
</template>

<script>
export default {
  props: {
    headBorderBottom: {
      type: Boolean,
      default: true
    },
    leftIcon: {
      type: String,
      required: true
    },
    title: {
      type: String,
      required: true
    },
    rightIcon: {
      type: String,
      default: "icon-menu"
    },
    showRightIcon: {
      type: Boolean,
      default: true
    }
  }
};
</script>

<style scoped>
</style>